<template>
	<view class="community-page">
		<custom-navbar class="my-navigation" title="社区交流" :isReturnVisible="false" :isAddVisible="true" />
		<view class="search-row">
			<view class="search-bar">
				<!-- 添加v-model绑定搜索关键词 -->
				<input class="search-input" placeholder="输入动态内容" v-model="searchKeyword" />
				<!-- 将搜索图标改为按钮并绑定点击事件 -->
				<view class="search-btn" @click="handleSearch">
					<image src="/static/icons/search.png" class="search-icon"></image>
				</view>
				<image src="/static/icons/mic.png" class="search-icon"></image>
			</view>
		</view>
		<view class="moment-list">
			<view class="moment-item" v-for="(item,index) in filteredMomentList" :key="index">
				<!-- 第一行 -->
				<view class="title-row">
					<image class="author-avatar" :src="item.authorAvatar"></image>
					<view class="author-info">
						<view class="author-nickname">{{item.authorName}}</view>
						<view class="post-time">
							<text style="color: darkgrey; font-size: 12px;">发表于：</text>
							<text class="created-time">{{ item.createdTime }}</text>
						</view>
					</view>
					<view class="delete-btn" v-if="item.isAuthor" @click="handleDeleteMoment(item.id)">
						<image src="/static/icons/delete.png" class="delete-btn-icon"></image>
					</view>
				</view>
				<navigator :url="`/pages/momentDetail/momentDetail?momentId=${item.id}`">
					<!-- 文字内容 -->
					<view class="content" v-if="item.content!=null">
						{{ item.content }}
					</view>
				</navigator>
				<!-- 自定义图片预览组件 -->
				<custom-image-preview :visible="previewVisible" :urls="previewUrls" :current-index="previewIndex"
					@close="previewVisible=false" @index-change="previewIndex=$event">
				</custom-image-preview>
				<view class="all-pic">
					<!-- 前三张图片内容 -->
					<view class="image-container" v-if="item.picUrlList.length>0">
						<view v-for="(imageItem,index) in item.picUrlList.slice(0,3)" :key="index"
							@click="openPreview(item.picUrlList, index)">
							<image class="image-item" :src="imageItem"></image>
						</view>
					</view>
					<!-- 显示还剩几张图片 -->
					<view v-if="item.picUrlList.length>3" class="fourth-image" @click="openPreview(item.picUrlList, 3)">
						<image class="image-item" :src="item.picUrlList[3]">
						</image>
						<view class="image-mask">
							<text class="mask-text">+{{item.picUrlList.length-3}}</text>
						</view>
					</view>
				</view>
				<!-- 操作行 -->
				<view class="opreation-row">
					<view class="like-btn" @click="handleLikeOrUnlike(item)">
						<image src="/static/icons/like_liked.png" v-if="item.isLiked" class="like-btn"></image>
						<image src="/static/icons/like_default.png" v-else class="like-btn"></image>
					</view>
					<view class="like-count" v-if="item.likeCount<100">{{ item.likeCount }}</view>
					<view class="like-count" v-else>99+</view>
					<navigator :url="`/pages/momentDetail/momentDetail?momentId=${item.id}`">
						<view class="comment-btn" @click="handleComment">
							<image src="/static/icons/comment.png" class="comment-btn"></image>
						</view>
					</navigator>

					<view class="comment-count" v-if="item.replyCount<100">{{ item.replyCount }}</view>
					<view class="comment-count" v-else>99+</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script setup>
	import customNavbar from '../../components/custom-navbar.vue';
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		deleteMoment,
		getMomentList,
		likeOrUnlikeMoment
	} from '../../api/moment';
	import CustomImagePreview from '../../components/custome-image-preview.vue';

	const searchKeyword = ref('');

	const originalMomentList = ref([]);

	// const originalMomentList = ref([{
	// 		id: 2,
	// 		content: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈",
	// 		picUrlList: [
	// 			"https://tse4-mm.cn.bing.net/th/id/OIP-C.tHAIAaw4ZNlr4v2ldAkvYwHaHa?w=169&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3",
	// 			"https://tse4-mm.cn.bing.net/th/id/OIP-C.tHAIAaw4ZNlr4v2ldAkvYwHaHa?w=169&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3",
	// 			"https://tse4-mm.cn.bing.net/th/id/OIP-C.tHAIAaw4ZNlr4v2ldAkvYwHaHa?w=169&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3",
	// 			"https://tse4-mm.cn.bing.net/th/id/OIP-C.tHAIAaw4ZNlr4v2ldAkvYwHaHa?w=169&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3",
	// 			"https://tse4-mm.cn.bing.net/th/id/OIP-C.tHAIAaw4ZNlr4v2ldAkvYwHaHa?w=169&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3"
	// 		],
	// 		replyCount: 100,
	// 		likeCount: 100,
	// 		createdBy: 4,
	// 		authorName: "zs",
	// 		authorAvatar: "https://ts1.tc.mm.bing.net/th/id/OIP-C.x1PyBhyeDOzT5_Wx5WiLJAAAAA?rs=1&pid=ImgDetMain&o=7&rm=3",
	// 		createdTime: "2025-07-07 13:47:04",
	// 		isLiked: true,
	// 		isAuthor: true
	// 	},
	// 	{
	// 		id: 1,
	// 		content: "今天这个护工要把我给气死了！",
	// 		picUrlList: [
	// 			"https://tse4-mm.cn.bing.net/th/id/OIP-C.tHAIAaw4ZNlr4v2ldAkvYwHaHa?w=169&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3",
	// 			"https://tse4-mm.cn.bing.net/th/id/OIP-C.tHAIAaw4ZNlr4v2ldAkvYwHaHa?w=169&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3",
	// 			"https://tse4-mm.cn.bing.net/th/id/OIP-C.tHAIAaw4ZNlr4v2ldAkvYwHaHa?w=169&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3",
	// 			"https://tse4-mm.cn.bing.net/th/id/OIP-C.tHAIAaw4ZNlr4v2ldAkvYwHaHa?w=169&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3"
	// 		],
	// 		replyCount: 3,
	// 		likeCount: 0,
	// 		createdBy: 4,
	// 		authorName: "zs",
	// 		authorAvatar: "https://ts1.tc.mm.bing.net/th/id/OIP-C.x1PyBhyeDOzT5_Wx5WiLJAAAAA?rs=1&pid=ImgDetMain&o=7&rm=3",
	// 		createdTime: "2025-07-07 13:41:12",
	// 		isLiked: false,
	// 		isAuthor: true
	// 	}
	// ])

	const getAllMomentList = async () => {
		const res = await getMomentList(1);
		console.log(res.data);
		if (res && res.data) {
			originalMomentList.value = res.data
		}
	}

	onShow(() => {
		getAllMomentList();
	});



	// 添加过滤后的记录列表
	const filteredMomentList = computed(() => {
		const keyword = searchKeyword.value.trim();
		if (!keyword) {
			return originalMomentList.value;
		}

		// 支持中文和英文大小写不敏感搜索
		return originalMomentList.value.filter(item => {
			// 直接匹配（中文或英文）
			if (item.content.includes(keyword)) {
				return true;
			}

			// 大小写不敏感匹配（处理英文大小写）
			const lowerMomentName = item.content.toLowerCase();
			const lowerKeyword = keyword.toLowerCase();
			return lowerMomentName.includes(lowerKeyword);
		});
	});

	function previewImage(urls, current) {
		uni.previewImage({
			current: current, // 当前图片索引
			urls: urls, // 所有图片URL列表
			indicator: 'number', // 显示数字指示器
			loop: true, // 支持循环预览
		});
	}

	// 添加预览状态
	const previewVisible = ref(false);
	const previewUrls = ref([]);
	const previewIndex = ref(0);

	function openPreview(urls, index) {
		previewUrls.value = urls;
		previewIndex.value = index;
		previewVisible.value = true;
	}

	// const selectedMoment = ref();
	const handleLikeOrUnlike = async (item) => {
		console.log(item);
		console.log(item.id);
		console.log(item.isLiked);
		await likeOrUnlikeMoment({
			momentId: item.id,
			status: item.isLiked ? 0 : 1
		}).then(res => {
			uni.showToast({
				title: '操作成功！',
				icon: 'success'
			});
		}).catch(err => {
			uni.showToast({
				title: '操作失败！',
				icon: 'none'
			});
		});
		getAllMomentList();
	}
	const handleDeleteMoment = (id) => {
		uni.showModal({
			title: '删除确认',
			content: '确定要删除这条动态吗？',
			confirmText: '删除',
			confirmColor: '#e64340',
			cancelText: '取消',
			success: async (res) => {
				if (res.confirm) {
					// 显示加载状态
					uni.showLoading({
						title: '删除中...',
						mask: true
					});

					try {
						await deleteMoment(id);
						uni.hideLoading();
						uni.showToast({
							title: '删除成功！',
							icon: 'success',
							duration: 2000
						});
						getAllMomentList();
					} catch (err) {
						uni.hideLoading();
						uni.showToast({
							title: '删除失败！',
							icon: 'none',
							duration: 2000
						});
					}
				}
			}
		});
	}
</script>

<style scoped>
	.community-page {
		min-height: 100vh;
		background: url('@/static/background.png') no-repeat;
		/* background-size: cover; */
		padding-bottom: 20px;
		padding-top: 30px;
	}

	.my-navigation {
		margin-bottom: 60px;
		/* border: 1px solid; */
	}

	.search-row {
		display: flex;
		align-items: center;
		padding: 10px 16px 0 16px;
		margin-top: 40px;
		margin-bottom: 40px;
		gap: 8px;
	}

	.search-bar {
		flex: 1;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 18px;
		box-shadow: 0 2px 8px rgba(91, 184, 172, 0.10);
		padding: 0 10px;
		height: 32px;
		min-width: 0;
	}

	.search-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		margin-left: 8px;
	}

	.search-icon {
		width: 18px;
		height: 18px;
		margin-right: 4px;
	}

	.search-input {
		flex: 1;
		border: none;
		background: transparent;
		font-size: 14px;
		color: #333;
		outline: none;
		height: 32px;
		line-height: 32px;
	}

	.moment-list {
		padding: 0 16px;
		margin-top: 20px;
	}

	.title-row {
		margin-top: 5px;
		display: flex;
		align-items: flex-start;
		/* 顶部对齐 */
		flex-wrap: nowrap;
	}

	.author-info {
		flex: 1;
		/* 占据剩余空间 */
		margin-left: 10px;
		min-width: 0;
		/* 防止内容溢出 */
	}

	.author-nickname {
		font-size: 16px;
		/* 适当减小字号 */
		color: dimgrey;
		line-height: 1.2;
		/* 添加文本溢出处理 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.post-time {
		display: flex;
		align-items: center;
		margin-top: 2px;
		/* 与昵称保持距离 */
	}

	.created-time {
		font-size: 12px;
		color: darkgrey;
		line-height: 1.2;
	}

	.delete-btn {
		margin-left: 10px;
		/* 减少左边距 */
		width: 24px;
		height: 24px;
		flex-shrink: 0;
		/* 防止被压缩 */
	}

	.author-avatar {
		width: 40px;
		height: 40px;
		margin-left: 10px;
	}



	.delete-btn-icon {
		width: 24px;
		height: 24px;
	}

	.content {
		margin-top: 10px;
		padding-left: 8px;
		padding-right: 8px;
	}

	.image-container {
		padding-bottom: 10px;
		padding-left: 10px;
		padding-top: 10px;
		display: flex;
		align-items: center;
		/* position: relative; */
		gap: 4px;
	}

	.image-item {
		width: 80px;
		height: 80px;
		/* border: 1px solid #333; */
		/* margin: 2px; */
	}

	.image-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		/* 半透明黑色背景 */
		/* border-radius: 4px; */
		display: flex;
		justify-content: center;
		align-items: center;
		/* margin: 2px; */
	}

	.mask-text {
		color: white;
		font-size: 18px;
		font-weight: bold;
	}

	.all-pic {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.fourth-image {
		position: relative;
		width: 80px;
		height: 80px;
		margin-top: -4px;
	}

	.opreation-row {
		margin-top: 10px;
		display: flex;
		align-items: center;
		margin-left: 220px;
		margin-bottom: 20px;
	}

	.like-btn {
		width: 24px;
		height: 24px;
	}

	.like-count {
		min-width: 24px;
		margin-left: 5px;
		color: dimgrey;
		padding-bottom: 4px;
	}

	.comment-btn {
		margin-left: 10px;
		width: 24px;
		height: 24px;
	}

	.comment-count {
		margin-left: 15px;
		color: dimgrey;
		padding-bottom: 4px;
		min-width: 24px;
	}
</style>